<template>
  <div>
    <el-form
      :model="form"
      :inline="true"
      label-position="left"
    >
    

      <el-form-item>
        
        <el-button
          type="primary"
          @click="handleAdd"
        >新增</el-button>
      </el-form-item>

    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="pic"
        label="图片"
        width="180"
      >
        <template #default="scope">

          <el-popover
            placement="right"
            title=""
            :width="260"
            trigger="hover"
          >
            <template #reference>
              <img
                style="width: 120px;height: 120px;"
                :src="scope.row.pic"
                alt=""
                srcset=""
              >
            </template>
            <template #default>
              <img
                style="width: 220px;height: 220px;"
                :src="scope.row.pic"
                alt=""
                srcset=""
              >
            </template>
          </el-popover>

        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180"
      />
      <el-table-column
        prop="subtitle"
        label="副标题"
      />

      <el-table-column
        prop="sorting"
        label="排序"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="120"
      >
        <template #default="scope">
          <el-popconfirm
            title="确定删除该图片?"
            @confirm="handleDel(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button
                link
                type="primary"
                size="small"
              >删除</el-button>
            </template>
          </el-popconfirm>

          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="centerDialogVisible"
      title="新增"
      width="70%"
      destroy-on-close
      :before-close="handleClose"
    >
      <el-form
        style="width: 80%;"
        :model="submitForm"
        label-width="120px"
      >
        <el-form-item label="标题">
          <el-input v-model="submitForm.title" />
        </el-form-item>
        <el-form-item label="副标题">
          <el-input v-model="submitForm.subtitle" />
        </el-form-item>
        <el-form-item label="图片上传">
          <el-upload
            class="avatar-uploader"
            :action="`${path}/fileUploadAndDownload/upload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="header"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <img
              v-if="imageUrl"
              :src="imageUrl"
              class="avatar"
            >
            <el-icon
              v-else
              class="avatar-uploader-icon"
            ><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="submitForm.sorting" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button
            type="primary"
            @click="handleSubmitForm"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useUserStore } from '@/pinia/modules/user'
import { sjbzslide, sjbzDelSlide, sjbzSlideDetail, sjbzUpdateSlide, sjbzCreateSlide } from '@/api/slides/sjbz'
import { ref, reactive, onMounted } from 'vue'
const tableData = ref([])
const imageUrl = ref([])
const path = ref(import.meta.env.VITE_BASE_API)
const form = ref([])
const submitForm = ref([])
const centerDialogVisible = ref(false)
tableData.value = []

const handleAvatarSuccess = (
  response,
  uploadFile
) => {
  console.log('token', uploadFile, response)
  imageUrl.value = response.data.file.url
  submitForm.value.pic = imageUrl.value
}

const header = ref({
  'x-token': ''
})

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('图片必须是PNG或JPG格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能大于 2MB!')
    return false
  }
  return true
}

const getdata = async() => {
  const res = await sjbzslide(form.value)
  if (res.code === 0) {
    if (res.data.length > 0) {
      var result = res.data.map(item => ({
        pic: item.pic.indexOf('http') === -1 ? 'http://sjbz.nbhysj.com' + item.pic : item.pic,
        id: item.id,
        title: item.title,
        subtitle: item.subtitle,
        sorting: item.sorting
      }))
      tableData.value = result || []
    }
  }
}

const handleDel = async(index, record) => {
  console.log(record)
  const res = await sjbzDelSlide({ id: record.id })
  if (res.code === 0) {
    getdata()
  }
}

const handleAdd = () => {
  centerDialogVisible.value = true
}

const handleClose = () => {
  centerDialogVisible.value = false
  submitForm.value.id = null
  imageUrl.value = ''
  submitForm.value.title = ''
  submitForm.value.subtitle = ''
  submitForm.value.sorting = ''
  submitForm.value.pic = ''
}

const handleEdit = async(index, record) => {
  const res = await sjbzSlideDetail({ id: record.id })
  if (res.code === 0) {
    centerDialogVisible.value = true
    submitForm.value = res.data
    if (res.data.pic.indexOf('http') === -1) {
      imageUrl.value = 'http://sjbz.nbhysj.com' + res.data.pic
    } else {
      imageUrl.value = res.data.pic
    }
  }
}

const handleSubmitForm = async() => {
  console.log(submitForm.value)
  if (!submitForm.value.id) {
    const res = await sjbzCreateSlide(submitForm.value)
    if (res.code === 0) {
      handleClose()
      getdata()
    }
  } else {
    const res = await sjbzUpdateSlide(submitForm.value)
    if (res.code === 0) {
      handleClose()
      getdata()
    }
  }
}

onMounted(() => {
  getdata()
  const { token } = useUserStore()
  header.value['x-token'] = token
})




</script>

<style lang="scss" scoped>
.avatar{
  width: 100px;
  height: 100px;
}
</style>
